<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形</title>
    <style>
        .a span {
            margin: 50px;
        }

        /* 1.宽
        2.高度
        3.边框-左  
        4.边框-右
        5.边框-下 
        transparent就是指定透明，要了解transparent绘制箭头就要了解border形成原理
        四个边框以斜角的形式在盒子的周围。
        当盒子宽高为0的时候，四边以三角形的形式进行相接。
        如果说只有一个边框宽度存在的时候，并且盒子没有高度，则这个边框不会显示，所以必须有两个边框宽度存在并且边框相邻，才会显示。
        */
        #box {
            width: 0;
            height: 0;
            border-top: 200px solid pink;
            border-left: 200px solid transparent;
            display: inline-block;
        }

        #box1 {
            width: 0;
            height: 0;
            border-bottom: 200px solid skyblue;
            border-left: 200px solid transparent;
            display: inline-block;

        }

        #box2 {
            width: 0;
            height: 0;
            border-top: 200px solid greenyellow;
            border-right: 200px solid transparent;
            display: inline-block;

        }

        #box3 {
            width: 0;
            height: 0;
            border-bottom: 200px solid yellowgreen;
            border-right: 200px solid transparent;
            display: inline-block;

        }
    </style>
</head>

<body>
    <div class="a">
        <span id="box">左上</span>
        <span id="box1">左下</span>
        <span id="box2">右上</span>
        <span id="box3">右下</span>
    </div>

</body>

</html>